<template>
  <div class="login-container">
    <!-- 装饰性背景元素 -->
    <div class="bg-shapes">
      <div class="shape shape-1" data-aos="fade-down" data-aos-duration="1500"></div>
      <div class="shape shape-2" data-aos="fade-up" data-aos-duration="1500"></div>
      <div class="shape shape-3" data-aos="fade-right" data-aos-duration="1500"></div>
      <div class="shape shape-4" data-aos="fade-left" data-aos-duration="1500"></div>
      <div class="floating-element floating-1" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="200"></div>
      <div class="floating-element floating-2" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="400"></div>
      <div class="floating-element floating-3" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="600"></div>
    </div>

    <div class="login-content">
      <div class="login-left" data-aos="fade-right" data-aos-duration="1000">
        <div class="login-info">
          <div class="brand-container" data-aos="fade-down" data-aos-duration="800" data-aos-delay="200">
            <h1 class="system-title animated-title">智能居家睡眠监护系统</h1>
            <div class="title-underline"></div>
          </div>
          
          <div class="feature-grid" data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
            <div class="feature-card" data-aos="fade-right" data-aos-duration="800" data-aos-delay="500">
              <div class="feature-icon">
                <div class="icon-bg"></div>
                <i class="el-icon-cpu"></i>
              </div>
              <div class="feature-content">
                <h3>智能传感</h3>
                <p>高精度传感器实时监测</p>
              </div>
            </div>
            
            <div class="feature-card" data-aos="fade-right" data-aos-duration="800" data-aos-delay="600">
              <div class="feature-icon">
                <div class="icon-bg"></div>
                <i class="el-icon-data-analysis"></i>
              </div>
              <div class="feature-content">
                <h3>数据分析</h3>
                <p>AI智能分析睡眠质量</p>
              </div>
            </div>
            
            <div class="feature-card" data-aos="fade-right" data-aos-duration="800" data-aos-delay="700">
              <div class="feature-icon">
                <div class="icon-bg"></div>
                <i class="el-icon-monitor"></i>
              </div>
              <div class="feature-content">
                <h3>健康监测</h3>
                <p>全方位监测健康状态</p>
              </div>
            </div>
          </div>
          
          <div class="monitor-container" data-aos="fade-up" data-aos-duration="800" data-aos-delay="800">
            <div class="monitor-header">
              <h3>7×24小时全天候监测</h3>
              <p>智能健康监测系统，持续守护您的健康</p>
            </div>
            <div class="monitor-content">
              <div class="monitor-visual">
                <div class="monitor-chart">
                  <div class="chart-container">
                    <svg class="chart-svg" viewBox="0 0 300 100">
                      <defs>
                        <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                          <stop offset="0%" style="stop-color:#165DFF;stop-opacity:0.8" />
                          <stop offset="100%" style="stop-color:#40a9ff;stop-opacity:0.8" />
                        </linearGradient>
                        <linearGradient id="fillGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                          <stop offset="0%" style="stop-color:#165DFF;stop-opacity:0.3" />
                          <stop offset="100%" style="stop-color:#165DFF;stop-opacity:0" />
                        </linearGradient>
                        <filter id="glow">
                          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                          <feMerge>
                            <feMergeNode in="coloredBlur"/>
                            <feMergeNode in="SourceGraphic"/>
                          </feMerge>
                        </filter>
                      </defs>
                      <!-- 网格背景 -->
                      <g class="chart-grid">
                        <line x1="0" y1="25" x2="300" y2="25" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
                        <line x1="0" y1="50" x2="300" y2="50" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
                        <line x1="0" y1="75" x2="300" y2="75" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
                      </g>
                      <path class="chart-fill" d="" fill="url(#fillGradient)" />
                      <path class="chart-line" d="" stroke="url(#lineGradient)" stroke-width="2" fill="none" filter="url(#glow)" />
                    </svg>
                  </div>
                </div>
                <div class="monitor-icon">
                  <div class="pulse-ring"></div>
                  <div class="pulse-ring delay-1"></div>
                  <div class="pulse-ring delay-2"></div>
                  <i class="el-icon-cpu"></i>
                </div>
              </div>
              <div class="monitor-status">
                <div class="status-item" data-aos="fade-up" data-aos-delay="900">
                  <div class="status-indicator active"></div>
                  <span>实时监测中</span>
                </div>
                <div class="status-item" data-aos="fade-up" data-aos-delay="1000">
                  <div class="status-indicator active"></div>
                  <span>数据分析中</span>
                </div>
                <div class="status-item" data-aos="fade-up" data-aos-delay="1100">
                  <div class="status-indicator active"></div>
                  <span>健康预警中</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="login-right" data-aos="fade-left" data-aos-duration="1000">
        <div class="login-form-container" data-aos="zoom-in" data-aos-duration="800" data-aos-delay="200">
          <div class="login-header" data-aos="fade-down" data-aos-duration="800" data-aos-delay="300">
            <h2>欢迎登录</h2>
            <p>请输入您的账号信息</p>
          </div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <el-form-item prop="username">
              <div class="input-wrapper">
                <el-input
                  v-model="loginForm.username"
                  type="text"
                  auto-complete="off"
                  placeholder="请输入账号"
                  prefix-icon="el-icon-user"
                />
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="input-wrapper">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  auto-complete="off"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  @keyup.enter.native="handleLogin"
                  show-password
                />
              </div>
            </el-form-item>
            <el-form-item prop="code" v-if="captchaEnabled">
              <div class="captcha-wrapper">
                <div class="input-wrapper captcha-input">
                  <el-input
                    v-model="loginForm.code"
                    auto-complete="off"
                    placeholder="验证码"
                    prefix-icon="el-icon-picture-outline"
                    @keyup.enter.native="handleLogin"
                  />
                </div>
                <div class="captcha-image" @click="getCode">
                  <img :src="codeUrl" alt="验证码" />
                </div>
              </div>
            </el-form-item>
            <div class="form-options">
              <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
            </div>
            <el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                class="login-button"
                @click.native.prevent="handleLogin"
              >
                <span v-if="!loading">登 录</span>
                <span v-else>
                  登录中...
                  <i class="el-icon-loading"></i>
                </span>
              </el-button>
            </el-form-item>
            <div class="register-link" v-if="register">
              <span>还没有账号？</span>
              <router-link :to="'/register'">立即注册</router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="login-footer">
      <span>@ 2025 智能居家睡眠监护系统</span>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login"
import Cookies from "js-cookie"
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    return {
      title: process.env.VUE_APP_TITLE,
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined,
      chartData: [],
      chartInterval: null
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCode()
    this.getCookie()
  },
  mounted() {
    this.initChart();
    this.startChartAnimation();
  },
  beforeDestroy() {
    if (this.chartInterval) {
      clearInterval(this.chartInterval);
    }
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img
          this.loginForm.uuid = res.uuid
        }
      })
    },
    getCookie() {
      const username = Cookies.get("username")
      const password = Cookies.get("password")
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 })
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
          } else {
            Cookies.remove("username")
            Cookies.remove("password")
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
          }).catch(() => {
            this.loading = false
            if (this.captchaEnabled) {
              this.getCode()
            }
          })
        }
      })
    },
    initChart() {
      // 初始化图表数据
      this.generateChartData();
      this.updateChart();
    },
    generateChartData() {
      // 生成随机数据点
      const points = 5;
      this.chartData = [];
      
      for (let i = 0; i < points; i++) {
        const x = (i / (points - 1)) * 300;
        const y = 20 + Math.random() * 60; // 随机Y值在20-80之间
        this.chartData.push({ x, y });
      }
    },
    updateChart() {
      // 更新SVG路径
      const chartLine = document.querySelector('.chart-line');
      const chartFill = document.querySelector('.chart-fill');
      
      if (chartLine && chartFill) {
        // 创建平滑曲线路径
        let pathData = this.createSmoothPath(this.chartData);
        chartLine.setAttribute('d', pathData);
        
        // 创建填充区域路径
        let fillData = pathData + ' L 300 100 L 0 100 Z';
        chartFill.setAttribute('d', fillData);
      }
    },
    createSmoothPath(points) {
      if (points.length < 2) return '';
      
      let path = `M ${points[0].x} ${points[0].y}`;
      
      // 使用贝塞尔曲线创建平滑路径
      for (let i = 0; i < points.length - 1; i++) {
        const xMid = (points[i].x + points[i + 1].x) / 2;
        const yMid = (points[i].y + points[i + 1].y) / 2;
        const cp1x = (xMid + points[i].x) / 2;
        const cp2x = (xMid + points[i + 1].x) / 2;
        
        path += ` Q ${cp1x} ${points[i].y}, ${xMid} ${yMid}`;
        path += ` Q ${cp2x} ${points[i + 1].y}, ${points[i + 1].x} ${points[i + 1].y}`;
      }
      
      return path;
    },
    startChartAnimation() {
      // 定期更新数据
      this.chartInterval = setInterval(() => {
        // 平滑更新数据点，而不是突然变化
        this.smoothUpdateData();
      }, 2000); // 每2秒更新一次数据
    },
    smoothUpdateData() {
      // 创建新数据数组
      const newData = [];
      
      // 为每个点创建新的目标值
      for (let i = 0; i < this.chartData.length; i++) {
        const currentPoint = this.chartData[i];
        
        // 创建新目标值，但限制变化幅度
        let targetY = currentPoint.y;
        
        // 随机决定是否更新这个点
        if (Math.random() > 0.5) {
          // 生成新值，但限制变化幅度
          const maxChange = 10; // 最大变化幅度
          const change = (Math.random() - 0.5) * maxChange * 2;
          targetY = Math.max(20, Math.min(80, currentPoint.y + change));
        }
        
        newData.push({
          x: currentPoint.x,
          y: currentPoint.y,
          targetY: targetY
        });
      }
      
      // 使用动画过渡到新值
      this.animateToNewData(newData);
    },
    animateToNewData(newData) {
      const duration = 1500; // 动画持续时间
      const startTime = Date.now();
      const startData = this.chartData.map(point => ({ ...point }));
      
      const animate = () => {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        // 使用缓动函数使动画更自然
        const easeProgress = this.easeInOutQuad(progress);
        
        // 更新每个数据点
        for (let i = 0; i < this.chartData.length; i++) {
          this.chartData[i].y = startData[i].y + (newData[i].targetY - startData[i].y) * easeProgress;
        }
        
        this.updateChart();
        
        if (progress < 1) {
          requestAnimationFrame(animate);
        }
      };
      
      requestAnimationFrame(animate);
    },
    easeInOutQuad(t) {
      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@keyframes growBar {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes drawLine {
  0% { stroke-dashoffset: 300; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -300; }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.1; }
}

@keyframes titleGradient {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.95);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(0deg);
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: rotate(180deg);
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(360deg);
  }
}

.login-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 50%, #f5f8ff 100%);
  overflow: hidden;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><rect width="120" height="120" fill="none" /><circle cx="60" cy="60" r="2" fill="%23165DFF" opacity="0.05"/><circle cx="20" cy="20" r="1.5" fill="%23165DFF" opacity="0.03"/><circle cx="100" cy="20" r="1.5" fill="%23165DFF" opacity="0.03"/><circle cx="20" cy="100" r="1.5" fill="%23165DFF" opacity="0.03"/><circle cx="100" cy="100" r="1.5" fill="%23165DFF" opacity="0.03"/><path d="M30,30 L90,90 M90,30 L30,90" stroke="%23165DFF" stroke-width="0.5" opacity="0.05"/></svg>');
    z-index: 0;
  }

  &::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(22, 93, 255, 0.05) 0%, rgba(22, 93, 255, 0) 70%);
    z-index: 0;
    animation: rotate 60s linear infinite;
  }

  .bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;

    .shape {
      position: absolute;
      background: rgba(22, 93, 255, 0.08);
      border-radius: 50%;
      z-index: 1;

      &.shape-1 {
        width: 300px;
        height: 300px;
        top: -150px;
        right: -100px;
        background: radial-gradient(circle, rgba(22, 93, 255, 0.1) 0%, rgba(22, 93, 255, 0.02) 70%);
        animation: float 8s ease-in-out infinite;
      }

      &.shape-2 {
        width: 200px;
        height: 200px;
        bottom: -100px;
        left: -50px;
        background: radial-gradient(circle, rgba(22, 93, 255, 0.08) 0%, rgba(22, 93, 255, 0.01) 70%);
        animation: float 10s ease-in-out infinite reverse;
      }

      &.shape-3 {
        width: 150px;
        height: 150px;
        top: 50%;
        left: -75px;
        background: radial-gradient(circle, rgba(22, 93, 255, 0.06) 0%, rgba(22, 93, 255, 0.01) 70%);
        animation: float 12s ease-in-out infinite;
      }

      &.shape-4 {
        width: 180px;
        height: 180px;
        top: 30%;
        right: -90px;
        background: radial-gradient(circle, rgba(22, 93, 255, 0.07) 0%, rgba(22, 93, 255, 0.01) 70%);
        animation: float 9s ease-in-out infinite reverse;
      }
    }

    .floating-element {
      position: absolute;
      z-index: 2;

      &.floating-1 {
        width: 60px;
        height: 60px;
        top: 20%;
        left: 15%;
        background: linear-gradient(45deg, rgba(22, 93, 255, 0.1), rgba(64, 169, 255, 0.05));
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        animation: morph 8s ease-in-out infinite;
      }

      &.floating-2 {
        width: 40px;
        height: 40px;
        top: 60%;
        right: 20%;
        background: linear-gradient(45deg, rgba(22, 93, 255, 0.08), rgba(64, 169, 255, 0.03));
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        animation: morph 10s ease-in-out infinite reverse;
      }

      &.floating-3 {
        width: 50px;
        height: 50px;
        bottom: 25%;
        left: 25%;
        background: linear-gradient(45deg, rgba(22, 93, 255, 0.09), rgba(64, 169, 255, 0.04));
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        animation: morph 12s ease-in-out infinite;
      }
    }
  }
}

.login-content {
  flex: 1;
  display: flex;
  z-index: 10;
  position: relative;
}

.login-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;

  .login-info {
    max-width: 500px;
    animation: fadeInLeft 0.8s ease-out;
  }

  .brand-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    position: relative;

    .logo-wrapper {
      margin-bottom: 15px;
      position: relative;

      .logo-icon {
        width: 80px;
        height: 80px;
        border-radius: 24px;
        background: linear-gradient(135deg, #165DFF 0%, #40a9ff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 24px rgba(22, 93, 255, 0.3);
        position: relative;
        overflow: hidden;

        .logo-inner {
          position: relative;
          z-index: 2;
          color: white;
          font-size: 32px;

          .logo-pulse {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.2);
            animation: pulse 2s infinite;
          }
        }

        &::before {
          content: "";
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          background: linear-gradient(45deg, #165DFF, #40a9ff, #165DFF);
          border-radius: 26px;
          z-index: -1;
          opacity: 0.8;
          filter: blur(8px);
        }
      }
    }

    .system-title {
      font-size: 36px;
      font-weight: 700;
      color: #165DFF;
      margin-bottom: 8px;
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(22, 93, 255, 0.1);
      text-align: center;
      
      &.animated-title {
        background: linear-gradient(90deg, #165DFF, #40a9ff, #165DFF);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: titleGradient 3s ease infinite;
      }
    }

    .title-underline {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #165DFF, #40a9ff);
      border-radius: 2px;
      margin-bottom: 8px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #165DFF;
        box-shadow: 0 0 8px rgba(22, 93, 255, 0.5);
      }
    }
  }

  .system-desc {
    font-size: 16px;
    color: #5a6c7d;
    margin-bottom: 25px;
    line-height: 1.5;
    text-align: center;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;

    .feature-card {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.8);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(22, 93, 255, 0.15);
        border-color: rgba(22, 93, 255, 0.2);
      }

      .feature-icon {
        position: relative;
        margin-bottom: 12px;

        .icon-bg {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: linear-gradient(135deg, rgba(22, 93, 255, 0.1) 0%, rgba(64, 169, 255, 0.05) 100%);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
        }

        i {
          position: relative;
          z-index: 2;
          font-size: 20px;
          color: #165DFF;
          line-height: 40px;
          text-align: center;
          display: block;
          width: 40px;
        }
      }

      .feature-content {
        flex: 1;
        width: 100%;

        h3 {
          font-size: 14px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0 0 4px;
        }

        p {
          font-size: 12px;
          color: #7f8c8d;
          margin: 0;
          line-height: 1.3;
        }
      }
    }
  }

  .monitor-container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(22, 93, 255, 0.15);
      border-color: rgba(22, 93, 255, 0.2);
    }

    .monitor-header {
      text-align: center;
      margin-bottom: 20px;

      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0 0 5px;
      }

      p {
        font-size: 13px;
        color: #7f8c8d;
        margin: 0;
      }
    }

    .monitor-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 0;
    }

    .monitor-visual {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 0 5px;
    }
    
    .monitor-chart {
      flex: 1;
      height: 60px;
      position: relative;
      margin-right: 20px;
    }
    
    .chart-container {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .chart-svg {
      width: 100%;
      height: 100%;
    }
    
    .chart-line {
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: drawLine 3s ease-in-out infinite;
    }
    
    .chart-fill {
      opacity: 0.7;
      animation: fadeInOut 4s ease-in-out infinite;
    }
    
    .chart-grid {
        animation: gridPulse 4s ease-in-out infinite;
      }

    .monitor-icon {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        font-size: 32px;
        color: #165DFF;
        z-index: 3;
      }

      .pulse-ring {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid rgba(22, 93, 255, 0.3);
        animation: pulse 2s infinite;
        z-index: 1;

        &.delay-1 {
          animation-delay: 0.5s;
        }

        &.delay-2 {
          animation-delay: 1s;
        }
      }
    }

    .monitor-status {
      display: flex;
      justify-content: space-around;
      width: 100%;

      .status-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .status-indicator {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-bottom: 8px;
          
          &.active {
            background: #52C41A;
            box-shadow: 0 0 8px rgba(82, 196, 26, 0.5);
            animation: blink 2s infinite;
          }
        }

        span {
          font-size: 12px;
          color: #2c3e50;
          text-align: center;
        }
      }
    }
  }

  .tech-indicators {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .indicator {
      text-align: center;
      flex: 1;

      .indicator-value {
        font-size: 24px;
        font-weight: 700;
        color: #165DFF;
        margin-bottom: 5px;
        background: linear-gradient(45deg, #165DFF, #40a9ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .indicator-label {
        font-size: 12px;
        color: #7f8c8d;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
    }
  }
}

.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;

  .login-form-container {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(22, 93, 255, 0.08), 0 10px 20px rgba(22, 93, 255, 0.04);
    animation: fadeInRight 0.8s ease-out;
    border: 1px solid rgba(22, 93, 255, 0.1);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #165DFF, #40a9ff, #165DFF);
      background-size: 200% 100%;
      animation: gradient 3s ease infinite;
    }
    
    @media (max-width: 768px) {
      padding: 30px 20px;
      margin: 0 20px;
      max-width: 100%;
    }
  }

  .login-header {
    text-align: center;
    margin-bottom: 30px;

    h2 {
      font-size: 28px;
      font-weight: 600;
      color: #1890ff;
      margin-bottom: 8px;
    }

    p {
      font-size: 16px;
      color: #606266;
    }
  }

  .login-form {
    .el-form-item {
      margin-bottom: 24px;
    }

    .input-wrapper {
      .el-input {
        .el-input__inner {
          height: 50px;
          line-height: 50px;
          border-radius: 12px;
          border: 1px solid #e0e6ed;
          padding-left: 45px;
          background: rgba(255, 255, 255, 0.8);
          transition: all 0.3s ease;
          font-size: 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

          &:focus {
            border-color: #165DFF;
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
            background: rgba(255, 255, 255, 0.95);
          }
          
          &:hover {
            border-color: rgba(22, 93, 255, 0.5);
          }
        }

        .el-input__prefix {
          left: 15px;
          top: 50%;
          transform: translateY(-50%);
          color: #909399;
        }

        .el-input__suffix {
          right: 15px;
        }
      }
    }

    .captcha-wrapper {
      display: flex;
      align-items: center;

      .captcha-input {
        flex: 1;
        margin-right: 10px;
      }

      .captcha-image {
        width: 120px;
        height: 50px;
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        &:hover {
          border-color: #165DFF;
          transform: scale(1.02);
          box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .login-button {
      width: 100%;
      height: 50px;
      margin-top: 10px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      background: linear-gradient(45deg, #165DFF, #40a9ff);
      border: none;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(22, 93, 255, 0.3);
      position: relative;
      overflow: hidden;
      
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(22, 93, 255, 0.4);
        
        &::before {
          left: 100%;
        }
      }
      
      &:active {
        transform: translateY(0);
      }
    }

    .register-link {
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
      color: #606266;

      a {
        color: #165DFF;
        text-decoration: none;
        font-weight: 500;
        margin-left: 5px;
        transition: all 0.3s ease;
        position: relative;

        &:hover {
          color: #096dd9;
          transform: translateY(-1px);
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 2px;
          background: #165DFF;
          transition: width 0.3s ease;
        }
        
        &:hover::after {
          width: 100%;
        }
      }
    }
  }
}

.login-footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  font-size: 14px;
  z-index: 1;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .login-left {
    padding: 0 40px;
    
    .brand-container {
      .logo-wrapper {
        .logo-icon {
          width: 70px;
          height: 70px;
          
          .logo-inner {
            font-size: 28px;
          }
        }
      }
      
      .system-title {
        font-size: 32px;
      }
    }
    
    .system-desc {
      font-size: 15px;
    }
    
    .feature-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
      
      .feature-card {
        padding: 12px;
        
        .feature-icon {
          .icon-bg {
            width: 45px;
            height: 45px;
          }
          
          i {
            font-size: 22px;
            line-height: 45px;
            width: 45px;
          }
        }
        
        .feature-content {
          h3 {
            font-size: 14px;
          }
          
          p {
            font-size: 12px;
          }
        }
      }
    }
    
    .monitor-container {
      padding: 15px;
      
      .monitor-header {
        h3 {
          font-size: 15px;
        }
        
        p {
          font-size: 11px;
        }
      }
      
      .monitor-content {
        padding: 10px 0;
      }
      
      .monitor-visual {
        margin-bottom: 15px;
        padding: 0 5px;
      }
      
      .monitor-chart {
        height: 50px;
      }

      .monitor-icon {
        width: 60px;
        height: 60px;
        
        i {
          font-size: 24px;
        }
        
        .pulse-ring {
          width: 60px;
          height: 60px;
        }
      }
      
      .monitor-status {
        .status-item {
          .status-indicator {
            width: 10px;
            height: 10px;
          }
          
          span {
            font-size: 10px;
          }
        }
      }
    }
  }
  
  .login-right {
    padding: 0 40px;
  }
}

@media (max-width: 992px) {
  .login-content {
    flex-direction: column;
  }
  
  .login-left {
    flex: none;
    height: auto;
    padding: 30px 20px;
    
    .login-info {
      text-align: center;
      max-width: 100%;
    }
    
    .brand-container {
      margin-bottom: 20px;
      
      .logo-wrapper {
        .logo-icon {
          width: 65px;
          height: 65px;
          
          .logo-inner {
            font-size: 26px;
          }
        }
      }
      
      .system-title {
        font-size: 30px;
      }
    }
    
    .system-desc {
      font-size: 14px;
      margin-bottom: 20px;
    }
    
    .feature-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
      
      .feature-card {
        padding: 12px;
        
        .feature-icon {
          .icon-bg {
            width: 36px;
            height: 36px;
          }
          
          i {
            font-size: 18px;
            line-height: 36px;
            width: 36px;
          }
        }
        
        .feature-content {
          h3 {
            font-size: 13px;
          }
          
          p {
            font-size: 11px;
          }
        }
      }
    }
    
    .monitor-container {
      padding: 15px;
      
      .monitor-header {
        h3 {
          font-size: 15px;
        }
        
        p {
          font-size: 11px;
        }
      }
      
      .monitor-content {
        padding: 10px 0;
      }
      
      .monitor-icon {
        width: 80px;
        height: 80px;
        
        i {
          font-size: 32px;
        }
        
        .pulse-ring {
          width: 80px;
          height: 80px;
        }
      }
      
      .monitor-status {
        .status-item {
          .status-indicator {
            width: 10px;
            height: 10px;
          }
          
          span {
            font-size: 10px;
          }
        }
      }
    }
  }
  
  .login-right {
    flex: 1;
    padding: 0 20px 30px;
  }
}

@media (max-width: 576px) {
  .login-left {
    padding: 20px 15px;
    
    .brand-container {
      margin-bottom: 15px;
      
      .logo-wrapper {
        margin-bottom: 10px;
        
        .logo-icon {
          width: 60px;
          height: 60px;
          
          .logo-inner {
            font-size: 24px;
          }
        }
      }
      
      .system-title {
        font-size: 28px;
      }
    }
    
    .system-desc {
      font-size: 13px;
      margin-bottom: 15px;
    }
    
    .feature-grid {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 15px;
      
      .feature-card {
        padding: 10px;
        
        .feature-icon {
          margin-bottom: 8px;
          
          .icon-bg {
            width: 38px;
            height: 38px;
          }
          
          i {
            font-size: 18px;
            line-height: 38px;
            width: 38px;
          }
        }
        
        .feature-content {
          h3 {
            font-size: 13px;
          }
          
          p {
            font-size: 11px;
          }
        }
      }
    }
    
    .monitor-container {
      padding: 12px;
      
      .monitor-header {
        h3 {
          font-size: 14px;
        }
        
        p {
          font-size: 10px;
        }
      }
      
      .monitor-content {
        padding: 8px 0;
      }
      
      .monitor-visual {
          margin-bottom: 12px;
          flex-direction: column;
          padding: 0 5px;
        }
        
        .monitor-chart {
          height: 40px;
          width: 100%;
          margin-bottom: 10px;
        }

      .monitor-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
        
        i {
          font-size: 20px;
        }
        
        .pulse-ring {
          width: 50px;
          height: 50px;
        }
      }
      
      .monitor-status {
        .status-item {
          .status-indicator {
            width: 8px;
            height: 8px;
            margin-bottom: 4px;
          }
          
          span {
            font-size: 8px;
          }
        }
      }
    }
  }
  
  .login-right {
    .login-form-container {
      padding: 30px 20px;
    }
  }
}
</style>
